<template>
  <div class="person">
    <h3>{{ name }}</h3>
    <h3>{{ age }}</h3>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
  </div>
</template>

<script lang="ts" setup name="Person1">
  import {ref} from 'vue';
  import {reactive,toRefs,toRef} from 'vue';
    //数据
    let person= reactive({
        name:"奥迪",
        age:24
    })

    //这个toRefs会将name和person.name进行绑定，修改name，person.name也会变，age也是同理（当然这里的name和age都是ref结构，得点value
    //这种写法我认为在对象包对象的结构中还是蛮有用的，可以提出来改，原宿主也会变
    let {name,age}=toRefs(person)
    //注意这个x不是ref结构，它里面的name和age才是ref结构｛name:RefImpl,age:RefImpl｝这样，修改就是x.name.vlaue
    let x=toRefs(person)

    let name1=toRef(person,'name')
    console.log(name1);
    

    //方法
    function changeName(){
      name.value+="~"
      console.log(name.value,person.name);
      console.log(name1);
    }

    function changeAge(){
      age.value+=1
    }

</script>

<style scoped>
.person{
    background-color: #8eace8;
    box-shadow: 0 0 10px;
    border-radius: 10px;
}
</style>